<template>
  <div>
    <van-cell v-for="item in list" :key="item.id" class="goods-item">
      <van-image class="goodsPhoto" src="https://img.yzcdn.cn/vant/cat.jpeg" />
      <div class="goods">{{ item.goods_name }}</div>
      <div class="unit_price">¥ {{ item.goods_price }}</div>
      <div class="quantity">×{{ item.goods_amount }}</div>
      <div class="price">
        ¥ <span>{{ item.sum_price }}</span>
      </div>
    </van-cell>
  </div>
</template>

<script>
export default {
  // 接收依赖注入父组件传过来的数据
  // inject: {
  //   goodsList: {
  //     type: Object,
  //     default: null
  //   }
  // },
  data () {
    return {
      // 假数据
      list: [{
        goods_name: '臭豆腐',
        quantity: 1,
        price: 100,
        id: 50,
        goods_price: 10,
        goods_amount: 2,
        sum_price: 20

      }, {
        goods_name: '牛肉',
        quantity: 2,
        price: 50,
        id: 51,
        goods_price: 40,
        goods_amount: 1,
        sum_price: 40
      }, {
        goods_name: '猪肉',
        quantity: 1,
        price: 120,
        id: 52,
        goods_price: 30,
        goods_amount: 2,
        sum_price: 60
      }, {
        goods_name: '鸭肉',
        quantity: 3,
        price: 80,
        id: 53,
        goods_price: 20,
        goods_amount: 2,
        sum_price: 40
      }, {
        goods_name: '羊肉',
        quantity: 6,
        price: 60,
        id: 55,
        goods_price: 50,
        goods_amount: 1,
        sum_price: 50
      }],
      loading: false,
      finished: false,
      alist: []
    }
  },
  created () {
    /*  const getGoodsList = this.goodsList.sh_goods_goodsorders
     this.alist = getGoodsList */
    this.$emit('goodlist', this.list)
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
/deep/.goods-item {
  .goodsPhoto {
    float: left;
    width: 100px;
    height: 100px;
  }
  .goods {
    margin-left: 50px;
    margin-right: -150px;
    float: left;
    height: 100px;
    width: 250px;
    line-height: 100px;
  }
  .quantity {
    margin-left: 90px;
    float: left;
    width: 50px;
    height: 100px;
    line-height: 100px;
  }
  .unit_price {
    float: left;
    height: 100px;
    line-height: 100px;
  }
  .price {
    width: 150px;
    text-align: right;
    float: left;
    height: 100px;
    line-height: 100px;
    span {
      color: red;
      font-weight: 700;
    }
  }
}
</style>
